<template>
  <div>
    <div>
      {{user.username}} - {{user.age}} 宠物 --{{user.pet.type}}
      <button @click="updateData">update</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, Ref } from 'vue'

interface Pet {
  type: string;
  age: number;
  color: string;
}
interface User {
  username: string;
  age: number;
  sex: string;
  pet: Pet;
}

const user = reactive<User>({
  username: 'jack',
  age: 18,
  sex: '男',
  pet: {
    type: 'cat',
    age: 1,
    color: 'white'
  }
})

const updateData = () => {
  user.username = 'rose'
  user.pet.type = 'dog'
}

// 普通的数据类型会被解包
const num = ref(1)
const numReactive = reactive({ num: num })
numReactive.num = 123
console.log(num.value)

// 数组或者map不会被解包
const books = reactive([ref('Vue 3 Guide')])
console.log(books[0].value)

const num1 = ref(22)
interface Num {
  num1?: unknown
}
const numReactive1 = reactive<Num>({ })
numReactive1.num1 = num1
num1.value = 455
console.log(numReactive1.num1 === num1.value)

</script>

<style scoped>
</style>
